@charset "utf-8";
@import "common/reset";
@function n($px){
    @return $px/2;
}
$wx:640px;
@function w($px){
    @return $px/$wx*100%;
}
$hx:1136px;
@function h($px){
    @return $px/$hx*100%;
}

.index{
    background: url(../img/index/bg.png) no-repeat;
    background-size: 100%;
    position: relative;
    img:nth-of-type(1){
        width:16.09%;
        position: absolute;
        top:3.69%;
        left:6.25%;
    }
    img:nth-of-type(2){
        width:59.68%;
        position: absolute;
        top:9.82%;
        left:19.21%;
    }
     img:nth-of-type(3){
        width:90.31%;
        position: absolute;
        top:15.1%;
        left:3.59%;
        animation: bounceIn 1s linear infinite;
        
    }
     img:nth-of-type(4){
        width:55.31%;
        position: absolute;
        top:28.12%;
        left:24.13%;
    }
    img:nth-of-type(5){
        width:53.59%;
        position: absolute;
        top:35.12%;
        left:24.13%;
    }
    img:nth-of-type(6){
        width:12.34%;
        position: absolute;
        top:32.21%;
        left:6.4%;
    }
    img:nth-of-type(7){
        width:9.37%;
        position: absolute;
        top:35.12%;
        right: 9.37%;
    }
    img:nth-of-type(8){
        width:30.62%;
        position: absolute;
        top:38.78%;
        right: 8.12%;
    }
    img:nth-of-type(9){
        width:6.87%;
        position: absolute;
        top:43.78%;
        right: 22.12%;
    }
    img:nth-of-type(10){
        width:10.31%;
        position: absolute;
        top:45.78%;
        right: 17.12%;
    }
    img:nth-of-type(11){
        width:7.31%;
        position: absolute;
        top:52.78%;
        right: 17.12%;
    }
    img:nth-of-type(12){
        width:9.31%;
        position: absolute;
        top:49.78%;
        right: 7.12%;
    }
    img:nth-of-type(13){
        width:50.64%;
        position: absolute;
        top:51.78%;
        right: 24.68%;
    }
    img:nth-of-type(14){
        width:27.18%;
        position: absolute;
        top:91.78%;
        right: 37.68%;
    }
   

   
}
.active.index{
     img:nth-of-type(15){
        width:0;
        position: absolute;
        top:57.78%;
        left: 12.35%;
        animation: zoomIn 1s linear 1s;
        animation: img15 1s linear 1s;
        animation-fill-mode: forwards;
        
    }
    @keyframes img15{
    0%,50%{
        width: 0%;
    }
    50%,100%{
        width: 14.84%;
    }
    }
     img:nth-of-type(16){
        width:0;
        position: absolute;
        top:79.78%;
        left: 9.35%;
        animation: zoomIn 1s linear 2s;
        animation: img16 1s linear 2s;
        animation-fill-mode: forwards;
    }
     @keyframes img16{
    0%,50%{
        width: 0%;
    }
    50%,100%{
        width: 20.31%;
    }
}
      img:nth-of-type(17){
        width:0%;
        position: absolute;
        top:55.78%;
        right: 7.35%;
        animation: zoomIn 1s linear 3s;
        animation: img17 1s linear 3s;
        animation-fill-mode: forwards;
    }
     @keyframes img17{
    0%,50%{
        width: 0%;
    }
    50%,100%{
        width: 23.59%;
    }
}
    img:nth-of-type(18){
        width:0;
        position: absolute;
        top:77.78%;
        right: 7.35%;
        animation: zoomIn 1s linear 4s;
        animation: img18 1s linear 4s;
        animation-fill-mode: forwards;
    }
     @keyframes img18{
    0%,50%{
        width: 0%;
    }
    50%,100%{
        width: 15%;
    }
}
}
.active.nei1{
     img:nth-of-type(2){
        width:w(123px);
        position: absolute;
        top: h(474px);
        left: w(30px);
        animation: fadeInRight 4s linear;
        animation-fill-mode: forwards;
    }
    img:nth-of-type(4){
        width:w(100px);
        position: absolute;
        top: h(489px);
        right: w(-10px);
        animation: fadeInRight 4s linear 0.2s;
        animation-fill-mode: forwards;
    }
    img:nth-of-type(6){
        width:w(46px);
        position: absolute;
        top: h(1019px);
        right: w(44px);
        animation:zoomIn 3s linear infinite;
    }

    img:nth-of-type(7){
        width:w(52px);
        position: absolute;
        top: h(960px);
        right: w(38px);    
        animation:zoomIn 3s linear infinite;    
    }
    img:nth-of-type(8){
        width:w(50px);
        position: absolute;
        top: h(907px);
        right: w(18px);   
        animation:zoomIn 3s linear infinite;     
    }
    img:nth-of-type(9){
        width:w(55px);
        position: absolute;
        top: h(837px);
        right: w(13px);  
        animation:zoomIn 3s linear infinite;      
    }
    img:nth-of-type(10){
        width:w(83px);
        position: absolute;
        top: h(726px);
        right: w(24px);  
        animation:zoomIn 3s linear infinite;      
    }
}
.nei1{
    background: url(../img/nei1/nei1_bg.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    span{
        color: white;
        font-size: n(36px);
        position: absolute;
        left:10.8125%;
        top: h(102px);
    }
    img:nth-of-type(1){
        width:w(252px);
        position: absolute;
        left:w(201px);
        top: w(100px);
    }
   
    img:nth-of-type(3){
        width:w(41px);
        position: absolute;
        top: h(489px);
        right: w(128px);
    }
    img:nth-of-type(5){
        width:w(86px);
        position: absolute;
        top: h(964px);
        right: w(80px);
    }
    
    span:nth-of-type(2){
        font-size: n(30px);
        color: black;
        font-weight: 700;
        position: absolute;
        left: w(75px);
        top: h(696px);
    }
    span:nth-of-type(3){
        font-size: n(30px);
        color: black;
        font-weight: 700;
        position: absolute;
        left: w(75px);
        top: h(789px);
    }
    span:nth-of-type(4){
        font-size: n(30px);
        color: black;
        font-weight: 700;
        position: absolute;
        left: w(75px);
        top: h(878px);
    }
    span:nth-of-type(5){
        font-size: n(30px);
        color: black;
        font-weight: 700;
        position: absolute;
        left: w(75px);
        top: h(967px);
    }
    input:nth-of-type(1){
        background: url(../img/nei1/heng_2.png);
        background-size: 100%;
        width:w(370px);
        height: h(64px);
        position: absolute;
        top: h(683px);
        left: w(57px);
    }
    input:nth-of-type(2){
        background: url(../img/nei1/heng_2.png);
        background-size: 100%;
        width:w(370px);
        height: h(64px);
        position: absolute;
        top: h(772px);
        left: w(57px);
    }
    input:nth-of-type(3){
        background: url(../img/nei1/heng_2.png);
        background-size: 100%;
        width:w(370px);
        height: h(64px);
        position: absolute;
        top: h(863px);
        left: w(57px);
    }
    input:nth-of-type(4){
        background: url(../img/nei1/heng_2.png);
        background-size: 100%;
        width:w(370px);
        height: h(64px);
        position: absolute;
        top: h(955px);
        left: w(57px);
    }
    
}
.nei2{
     background: url(../img/nei1/nei1_bg.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
     img:nth-of-type(1){
        width:w(500px);
        position: absolute;
        left:w(44px);
        top: w(96px);
    }
    img:nth-of-type(2){
        width:w(214px);
        position: absolute;
        left:w(213px);
        top: w(184px);
    }
    img:nth-of-type(3){
        width:w(112px);
        position: absolute;
        left:w(32px);
        top: w(276px);
    }
    img:nth-of-type(4){
        width:w(61px);
        position: absolute;
        right:w(191px);
        top: w(291px);
    }
    img:nth-of-type(5){
        width:w(70px);
        position: absolute;
        right:w(123px);
        top: w(311px);
    }
    img:nth-of-type(6){
        width:w(90px);
        position: absolute;
        right:w(-20px);
        top: w(311px);
    }
    img:nth-of-type(7){
        width:w(150px);
        position: absolute;
        right: w(23px);
        bottom: h(75px);
    }
span:nth-of-type(1){
        font-size: n(30px);
        color: black;
        font-weight: 700;
        position: absolute;
        left: w(75px);
        top: h(696px);
    }
    span:nth-of-type(2){
        font-size: n(30px);
        color: black;
        font-weight: 700;
        position: absolute;
        left: w(75px);
        top: h(789px);
    }
    span:nth-of-type(3){
        font-size: n(30px);
        color: black;
        font-weight: 700;
        position: absolute;
        left: w(75px);
        top: h(878px);
    }
    span:nth-of-type(4){
        font-size: n(30px);
        color: black;
        font-weight: 700;
        position: absolute;
        left: w(75px);
        top: h(967px);
    }
    input:nth-of-type(1){
        background: url(../img/nei1/heng_2.png);
        background-size: 100%;
        width:w(370px);
        height: h(64px);
        position: absolute;
        top: h(683px);
        left: w(57px);
    }
    input:nth-of-type(2){
        background: url(../img/nei1/heng_2.png);
        background-size: 100%;
        width:w(370px);
        height: h(64px);
        position: absolute;
        top: h(772px);
        left: w(57px);
    }
    input:nth-of-type(3){
        background: url(../img/nei1/heng_2.png);
        background-size: 100%;
        width:w(370px);
        height: h(64px);
        position: absolute;
        top: h(863px);
        left: w(57px);
    }
    input:nth-of-type(4){
        background: url(../img/nei1/heng_2.png);
        background-size: 100%;
        width:w(370px);
        height: h(64px);
        position: absolute;
        top: h(955px);
        left: w(57px);
    }
}
.nei3{
    background: url(../img/nei1/nei1_bg.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    img:nth-of-type(1){
        width:w(415px);
        position: absolute;
        left: w(44px);
        top: h(104px);
    }
    img:nth-of-type(2){
        width:w(380px);
        position: absolute;
        left: w(137px);
        top: h(266px);
    }
    img:nth-of-type(3){
        width:w(115px);
        position: absolute;
        left: w(30px);
        top: h(480px);
    }
    img:nth-of-type(4){
        width:w(90px);
        position: absolute;
        right: w(-20px);
        top: h(444px);
    }
    img:nth-of-type(5){
        width:w(145px);
        position: absolute;
        right: w(20px);
        bottom: h(77px);
    }
   span:nth-of-type(1){
        font-size: n(30px);
        color: black;
        font-weight: 700;
        position: absolute;
        left: w(75px);
        top: h(696px);
    }
    span:nth-of-type(2){
        font-size: n(30px);
        color: black;
        font-weight: 700;
        position: absolute;
        left: w(75px);
        top: h(789px);
    }
    span:nth-of-type(3){
        font-size: n(30px);
        color: black;
        font-weight: 700;
        position: absolute;
        left: w(75px);
        top: h(878px);
    }
    span:nth-of-type(4){
        font-size: n(24px);
        color: black;
        font-weight: 700;
        position: absolute;
        left: w(75px);
        top: h(967px);
    }
    input:nth-of-type(1){
        background: url(../img/nei1/heng_2.png);
        background-size: 100%;
        width:w(370px);
        height: h(64px);
        position: absolute;
        top: h(683px);
        left: w(57px);
    }
    input:nth-of-type(2){
        background: url(../img/nei1/heng_2.png);
        background-size: 100%;
        width:w(370px);
        height: h(64px);
        position: absolute;
        top: h(772px);
        left: w(57px);
    }
    input:nth-of-type(3){
        background: url(../img/nei1/heng_2.png);
        background-size: 100%;
        width:w(370px);
        height: h(64px);
        position: absolute;
        top: h(863px);
        left: w(57px);
    }
    input:nth-of-type(4){
        background: url(../img/nei1/heng_2.png);
        background-size: 100%;
        width:w(370px);
        height: h(64px);
        position: absolute;
        top: h(955px);
        left: w(57px);
    }
}
@media only screen and (min-height: 515px) and (max-height: 666px) {
    .index{
    background: url(../img/index/bg.png) no-repeat;
    background-size: 100%;
    position: relative;
    img:nth-of-type(1){
        width:12.09%;
        position: absolute;
        top:3.69%;
        left:6.25%;
    }
    img:nth-of-type(2){
        width:45.68%;
        position: absolute;
        top:7.82%;
        left:28.21%;
    }
     img:nth-of-type(3){
        width:60.31%;
        position: absolute;
        top:15.1%;
        left:20.59%;
        animation: bounceIn 1s linear infinite;
        
    }
     img:nth-of-type(4){
        width:48.31%;
        position: absolute;
        top:28.12%;
        left:27.13%;
    }
    img:nth-of-type(5){
        width:48.59%;
        position: absolute;
        top:36.12%;
        left:27.13%;
    }
    img:nth-of-type(6){
        width:12.34%;
        position: absolute;
        top:32.21%;
        left:6.4%;
    }
    img:nth-of-type(7){
        width:9.37%;
        position: absolute;
        top:35.12%;
        right: 9.37%;
    }
    img:nth-of-type(8){
        width:30.62%;
        position: absolute;
        top:34.78%;
        right: 8.12%;
    }
    img:nth-of-type(9){
        width:6.87%;
        position: absolute;
        top:43.78%;
        right: 22.12%;
    }
    img:nth-of-type(10){
        width:10.31%;
        position: absolute;
        top:42.78%;
        right: 18.12%;
    }
    img:nth-of-type(11){
        width:7.31%;
        position: absolute;
        top:52.78%;
        right: 17.12%;
    }
    img:nth-of-type(12){
        width:9.31%;
        position: absolute;
        top:49.78%;
        right: 7.12%;
    }
    img:nth-of-type(13){
        width:44.64%;
        position: absolute;
        top:47.78%;
        right: 24.68%;
    }
    img:nth-of-type(14){
        width:27.18%;
        position: absolute;
        top:91.78%;
        right: 37.68%;
    }
   

   
}
.active.index{
     img:nth-of-type(15){
        width:0;
        position: absolute;
        top:57.78%;
        left: 16.35%;
        animation: zoomIn 1s linear 1s;
        animation: img15 1s linear 1s;
        animation-fill-mode: forwards;
        
    }
    @keyframes img15{
    0%,50%{
        width: 0%;
    }
    50%,100%{
        width: 14.84%;
    }
    }
     img:nth-of-type(16){
        width:0;
        position: absolute;
        top:75.78%;
        left: 15.35%;
        animation: zoomIn 1s linear 2s;
        animation: img16 1s linear 2s;
        animation-fill-mode: forwards;
    }
     @keyframes img16{
    0%,50%{
        width: 0%;
    }
    50%,100%{
        width: 20.31%;
    }
}
      img:nth-of-type(17){
        width:0%;
        position: absolute;
        top:55.78%;
        right: 7.35%;
        animation: zoomIn 1s linear 3s;
        animation: img17 1s linear 3s;
        animation-fill-mode: forwards;
    }
     @keyframes img17{
    0%,50%{
        width: 0%;
    }
    50%,100%{
        width: 23.59%;
    }
}
    img:nth-of-type(18){
        width:0;
        position: absolute;
        top:76.78%;
        right: 9.35%;
        animation: zoomIn 1s linear 4s;
        animation: img18 1s linear 4s;
        animation-fill-mode: forwards;
    }
     @keyframes img18{
    0%,50%{
        width: 0%;
    }
    50%,100%{
        width: 15%;
    }
}
}
.active.nei1{
     img:nth-of-type(2){
        width:w(123px);
        position: absolute;
        top: h(474px);
        left: w(30px);
        animation: fadeInRight 4s linear;
        animation-fill-mode: forwards;
    }
    img:nth-of-type(4){
        width:w(100px);
        position: absolute;
        top: h(489px);
        right: w(-10px);
        animation: fadeInRight 4s linear 0.2s;
        animation-fill-mode: forwards;
    }
    img:nth-of-type(6){
        width:w(46px);
        position: absolute;
        top: h(1019px);
        right: w(44px);
        animation:zoomIn 3s linear infinite;
    }

    img:nth-of-type(7){
        width:w(52px);
        position: absolute;
        top: h(960px);
        right: w(38px);    
        animation:zoomIn 3s linear infinite;    
    }
    img:nth-of-type(8){
        width:w(50px);
        position: absolute;
        top: h(907px);
        right: w(18px);   
        animation:zoomIn 3s linear infinite;     
    }
    img:nth-of-type(9){
        width:w(55px);
        position: absolute;
        top: h(837px);
        right: w(13px);  
        animation:zoomIn 3s linear infinite;      
    }
    img:nth-of-type(10){
        width:w(83px);
        position: absolute;
        top: h(726px);
        right: w(24px);  
        animation:zoomIn 3s linear infinite;      
    }
}
.nei1{
    background: url(../img/nei1/nei1_bg.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    span{
        color: white;
        font-size: n(36px);
        position: absolute;
        left:10.8125%;
        top: h(102px);
    }
    img:nth-of-type(1){
        width:w(252px);
        position: absolute;
        left:w(201px);
        top: w(100px);
    }
   
    img:nth-of-type(3){
        width:w(41px);
        position: absolute;
        top: h(489px);
        right: w(128px);
    }
    img:nth-of-type(5){
        width:w(86px);
        position: absolute;
        top: h(964px);
        right: w(80px);
    }
    
    span:nth-of-type(2){
        font-size: n(30px);
        color: black;
        font-weight: 700;
        position: absolute;
        left: w(75px);
        top: h(696px);
    }
    span:nth-of-type(3){
        font-size: n(30px);
        color: black;
        font-weight: 700;
        position: absolute;
        left: w(75px);
        top: h(789px);
    }
    span:nth-of-type(4){
        font-size: n(30px);
        color: black;
        font-weight: 700;
        position: absolute;
        left: w(75px);
        top: h(878px);
    }
    span:nth-of-type(5){
        font-size: n(30px);
        color: black;
        font-weight: 700;
        position: absolute;
        left: w(75px);
        top: h(967px);
    }
    input:nth-of-type(1){
        background: url(../img/nei1/heng_2.png);
        background-size: 100%;
        width:w(370px);
        height: h(64px);
        position: absolute;
        top: h(683px);
        left: w(57px);
    }
    input:nth-of-type(2){
        background: url(../img/nei1/heng_2.png);
        background-size: 100%;
        width:w(370px);
        height: h(64px);
        position: absolute;
        top: h(772px);
        left: w(57px);
    }
    input:nth-of-type(3){
        background: url(../img/nei1/heng_2.png);
        background-size: 100%;
        width:w(370px);
        height: h(64px);
        position: absolute;
        top: h(863px);
        left: w(57px);
    }
    input:nth-of-type(4){
        background: url(../img/nei1/heng_2.png);
        background-size: 100%;
        width:w(370px);
        height: h(64px);
        position: absolute;
        top: h(955px);
        left: w(57px);
    }
    
}
.nei2{
     background: url(../img/nei1/nei1_bg.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
     img:nth-of-type(1){
        width:w(500px);
        position: absolute;
        left:w(44px);
        top: w(96px);
    }
    img:nth-of-type(2){
        width:w(214px);
        position: absolute;
        left:w(213px);
        top: w(184px);
    }
    img:nth-of-type(3){
        width:w(112px);
        position: absolute;
        left:w(32px);
        top: w(276px);
    }
    img:nth-of-type(4){
        width:w(61px);
        position: absolute;
        right:w(191px);
        top: w(291px);
    }
    img:nth-of-type(5){
        width:w(70px);
        position: absolute;
        right:w(123px);
        top: w(311px);
    }
    img:nth-of-type(6){
        width:w(90px);
        position: absolute;
        right:w(-20px);
        top: w(311px);
    }
    img:nth-of-type(7){
        width:w(150px);
        position: absolute;
        right: w(23px);
        bottom: h(75px);
    }
span:nth-of-type(1){
        font-size: n(30px);
        color: black;
        font-weight: 700;
        position: absolute;
        left: w(75px);
        top: h(696px);
    }
    span:nth-of-type(2){
        font-size: n(30px);
        color: black;
        font-weight: 700;
        position: absolute;
        left: w(75px);
        top: h(789px);
    }
    span:nth-of-type(3){
        font-size: n(30px);
        color: black;
        font-weight: 700;
        position: absolute;
        left: w(75px);
        top: h(878px);
    }
    span:nth-of-type(4){
        font-size: n(30px);
        color: black;
        font-weight: 700;
        position: absolute;
        left: w(75px);
        top: h(967px);
    }
    input:nth-of-type(1){
        background: url(../img/nei1/heng_2.png);
        background-size: 100%;
        width:w(370px);
        height: h(64px);
        position: absolute;
        top: h(683px);
        left: w(57px);
    }
    input:nth-of-type(2){
        background: url(../img/nei1/heng_2.png);
        background-size: 100%;
        width:w(370px);
        height: h(64px);
        position: absolute;
        top: h(772px);
        left: w(57px);
    }
    input:nth-of-type(3){
        background: url(../img/nei1/heng_2.png);
        background-size: 100%;
        width:w(370px);
        height: h(64px);
        position: absolute;
        top: h(863px);
        left: w(57px);
    }
    input:nth-of-type(4){
        background: url(../img/nei1/heng_2.png);
        background-size: 100%;
        width:w(370px);
        height: h(64px);
        position: absolute;
        top: h(955px);
        left: w(57px);
    }
}
.nei3{
    background: url(../img/nei1/nei1_bg.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    img:nth-of-type(1){
        width:w(415px);
        position: absolute;
        left: w(44px);
        top: h(104px);
    }
    img:nth-of-type(2){
        width:w(380px);
        position: absolute;
        left: w(137px);
        top: h(266px);
    }
    img:nth-of-type(3){
        width:w(115px);
        position: absolute;
        left: w(30px);
        top: h(480px);
    }
    img:nth-of-type(4){
        width:w(90px);
        position: absolute;
        right: w(-20px);
        top: h(444px);
    }
    img:nth-of-type(5){
        width:w(145px);
        position: absolute;
        right: w(20px);
        bottom: h(77px);
    }
   span:nth-of-type(1){
        font-size: n(30px);
        color: black;
        font-weight: 700;
        position: absolute;
        left: w(75px);
        top: h(696px);
    }
    span:nth-of-type(2){
        font-size: n(30px);
        color: black;
        font-weight: 700;
        position: absolute;
        left: w(75px);
        top: h(789px);
    }
    span:nth-of-type(3){
        font-size: n(30px);
        color: black;
        font-weight: 700;
        position: absolute;
        left: w(75px);
        top: h(878px);
    }
    span:nth-of-type(4){
        font-size: n(24px);
        color: black;
        font-weight: 700;
        position: absolute;
        left: w(75px);
        top: h(967px);
    }
    input:nth-of-type(1){
        background: url(../img/nei1/heng_2.png);
        background-size: 100%;
        width:w(370px);
        height: h(64px);
        position: absolute;
        top: h(683px);
        left: w(57px);
    }
    input:nth-of-type(2){
        background: url(../img/nei1/heng_2.png);
        background-size: 100%;
        width:w(370px);
        height: h(64px);
        position: absolute;
        top: h(772px);
        left: w(57px);
    }
    input:nth-of-type(3){
        background: url(../img/nei1/heng_2.png);
        background-size: 100%;
        width:w(370px);
        height: h(64px);
        position: absolute;
        top: h(863px);
        left: w(57px);
    }
    input:nth-of-type(4){
        background: url(../img/nei1/heng_2.png);
        background-size: 100%;
        width:w(370px);
        height: h(64px);
        position: absolute;
        top: h(955px);
        left: w(57px);
    }
}
}